<template>
  <div>
    <!-- 根据文件类型展示不同的内容 -->
    <template v-if="fileType === 'image'">
      <img :src="fileLink" alt="Image" style="width: 200px;height: 200px;object-fit: contain;">
    </template>
    <template v-else-if="fileType === 'audio'">
      <audio controls :src="fileLink" style="width: 200px;height: 200px;">
        Your browser does not support the audio tag.
      </audio>
    </template>
    <template v-else-if="fileType === 'video'">
      <video controls :src="fileLink" style="width: 200px;height: 200px;">
        Your browser does not support the video tag.
      </video>
    </template>
    <template v-else>
      <!-- 如果是其他类型的文件，提供按钮打开新窗口 -->
      <button @click="openNewWindow">下载文件：{{ fileLink }}</button>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    fileLink: {
      type: String,
      default: () => ''
    }
  },
  computed: {
    fileType() {
      console.log('====================================');
      console.log(this.fileLink);
      console.log('====================================');
      // 获取链接的文件后缀
      const fileExtension = this.fileLink.split('.').pop().toLowerCase();

      // 根据文件后缀判断文件类型
      if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png' || fileExtension === 'gif') {
        return 'image';
      } else if (fileExtension === 'mp3' || fileExtension === 'wav' || fileExtension === 'ogg') {
        return 'audio';
      } else if (fileExtension === 'mp4' || fileExtension === 'avi' || fileExtension === 'mov') {
        return 'video';
      } else {
        return 'other';
      }
    }
  },
  methods: {
    openNewWindow() {
      // 打开新窗口展示文件
      window.open(this.fileLink, '_blank');
    }
  }
};
</script>

